import {Carousel,Avatar} from 'antd';
import React, {useEffect, useState} from 'react';
import { quotesList } from '@/utils/constant';
import './BannerPortal.less'
import {getBannerList} from "@/pages/Workplace/service";
import avatarImg from '../../../assets/avatar.png';
import maleImg from '../../../assets/male.png';
import femaleImg from '../../../assets/female.png';
import moment from 'moment'

const BannerPortal = (props) => {
  const [data, setData] = useState([]);
  const {currentUser={}} = props;

  useEffect(() => {
    getBannerList().then(res => {
      setData(res ? res : [])
    });
  }, []);

  const getBubble = () => {
    const hour = new Date().getHours();
    if(hour < 6) {
      return '夜深了，记得早点回家哦！'
    } else if(hour < 9) {
      return '早上好，开始一天的计划吧！'
    } else if(hour < 13) {
      return '上午好，又是充满活力的一天！'
    } else if(hour < 14) {
      return '中午好，休息一下，补充能量！'
    } else if(hour < 20) {
      return '下午好，为自己继续努力奋斗！'
    } else if(hour < 24) {
      return '晚上好，为明天做好准备！'
    } else {
      return '您好，感谢您对彰泰的付出！'
    }
  };

  const getDayText = () => {
      const day = moment().diff(moment(currentUser.hiredate),'days')
      if(day ===0) {
        return <span>欢迎来到彰泰，快熟悉一下新环境吧！</span>
      } else if(day < 10) {
        return <span>今天是初来乍到第 <span style={{color: '#68b377',fontWeight: 'bold'}}>{day}</span> 天，多认识一下身边的同事吧。</span>
      } else if(day < 100) {
        return <span>欢迎加入彰泰的第 <span style={{color: '#68b377',fontSize:'20px',fontWeight: 'bold'}}>{day}</span> 天，每一天都见证你的进步。</span>
      } else if(day < 365) {
        return <span>感谢你为彰泰奉献了 <span style={{color: '#68b377',fontSize:'24px', fontWeight: 'bold'}}>{day}</span> 天。彰泰与你一起奋斗。</span>
      } else if(day < 1000) {
        return <span>感谢你与彰泰共成长了 <span style={{color: '#68b377',fontSize:'28px',fontWeight: 'bold'}}>{day}</span> 天。彰泰一路有你。</span>
      } else if(day < 3650) {
        return <span>你陪伴彰泰努力了 <span style={{color: '#68b377',fontSize:'32px',fontWeight: 'bold'}}>{day}</span> 天。成就了彰泰的今天。</span>
      } else {
        return <span>感谢你不离不弃的 <span style={{color: '#68b377',fontSize:'36px',fontWeight: 'bold'}}>{day}</span> 天。彰泰继续与你同行。</span>
      }
  };

  return (
    <div>
      <Carousel className="banner-portal" autoplay autoplaySpeed={10000}>
        {
          data.map((item, index) => {
            return <div key={index}>
              <a href={item.url} target="_blank">
                <img src={item.bannerUrl} className='banner-portal-img'/>
              </a>
            </div>
          })
        }
      </Carousel>
      <div className='user-info'>
        <div className='user-info-div' >
          <Avatar className='user-info-div-avatar' src={currentUser !== {} ? currentUser.avatar ? currentUser.avatar : (currentUser.gender === '2' ? femaleImg : maleImg) : avatarImg}/>
        </div>
        <div className='user-info-info'>
          <span className='font-21'>{currentUser.name}</span>
          <span className='font-18'> | {getDayText()} </span>
          <p className='font-16 user-info-info-margin'>{currentUser.orgname} {currentUser.department} {currentUser.jobname}</p>
          <p className='user-info-info-saying'>{currentUser.saying ? currentUser.saying :quotesList[Math.floor((Math.random()*quotesList.length))]}</p>
        </div>
        <div className='user-info-flowers'>
          <div className='user-info-bubble'>
            <span className='user-info-bubble-greetings'>{getBubble()}</span>
          </div>
        </div>
      </div>
    </div>
  )
};

export default BannerPortal
